<script>
import * as echarts from 'echarts';
import VChart from "vue-echarts";
import {ChartDateFormatter} from "./formatter.js";
import {BlockView} from "./block-view.js";
import {toRaw} from "vue";
const TIME_FORMATTER = ChartDateFormatter.createDefault();

// 返回大于或等于 value 的第一个元素的索引
function lowerBound(arr, compareFunc) {
  let left = 0;
  let right = arr.length;

  while (left < right) {
    let mid = Math.floor((left + right) / 2);

    if (compareFunc(arr[mid]) < 0) {
      left = mid + 1;
    } else {
      right = mid;
    }
  }

  return left;
}


export default {
  components: {
    VChart
  },
  methods: {
    collectRecordsForBlock(block) {
      let records = []
      block.records.forEach((rec) => records.push(rec));

      let eventRecords = this.pd.eventRecords;
      for (let i = lowerBound(eventRecords, (rec) => rec.timestamp - block.records[0].timestamp);
           i < eventRecords.length && eventRecords[i].timestamp < block.records[block.records.length - 1].timestamp;
           ++i) {
        records.push(eventRecords[i]);
      }

      records.sort((a, b) => {
        if (a.timestamp < b.timestamp) {
          return -1;
        }
        if (a.timestamp > b.timestamp) {
          return 1;
        }
        return 0;
      });

      return records;
    },
    showBlock(block) {
      this.block = block;
      this.$nextTick(() => {
        this.relevantRecords = this.collectRecordsForBlock(block);

        let bv = new BlockView(this.getStreamNum(), this.getBlockChart().clientWidth, this.getBlockChart().clientHeight);
        for (let rec of this.relevantRecords) {
          bv.addRecord(rec);
        }

        let series = bv.draw();
        console.log("BlockView series:", series);
        this.option.series = series;
      });
    },
    format(timestamp) {
      return TIME_FORMATTER.format(timestamp);
    },
    getBlockChart() {
      return this.$refs.blockChartDiv;
    },
    setProfilingData(pd) {
      this.pd = toRaw(pd);
    },
    getStreamNum() {
      return this.pd.streamIdsToMemporyPool.size;
    }
  },
  data() {
    return {
      pd: undefined,
      block: undefined,
      relevantRecords: [],
      option: {
        title: {
          text: 'Block lifecycle graph'
        },
        series: []
      }
    }
  }
}
</script>

<template>
<div v-if="block === undefined">
  <div class="d-flex justify-content-center align-items-center p-lg-5">
    <h3 class="text-secondary"><b>Select a block in table to show details</b></h3>
  </div>
</div>
<div v-if="block !== undefined">
  <div class="d-flex flex-row">
    <div class="w-50">
      <h1 class="h2">Block Summary</h1>
      <p>BlockId: {{block.blockId}}</p>
      <p>Size: {{block.size}}</p>
      <p>Device address: {{block.address}}</p>
      <p>Birth stream: {{block.birthStream}}</p>
      <p>Birth time: {{format(block.birthTime)}}</p>
      <p>Compute node name: {{block.computeNodeName}}</p>
    </div>
    <div ref="blockChartDiv" class="w-50" style="height: 400px;">
      <v-chart :option="option" />
      </div>
    </div>
    <div>
      <h1 class="h2">Logs</h1>
      <div>
        <p v-for="rec in relevantRecords">{{ rec.log }}</p>
      </div>
    </div>
  </div>
  </template>

  <style lang="scss">
  @import 'bootstrap/scss/bootstrap';
  .log-label {
    @extend .text-white;
    @extend .rounded-1;
    @extend .px-1;
    @extend .m-2;
  }
  .log-alloc {
    @extend .log-label;
    background-color: red;
  }
  .log-free {
    @extend .log-label;
    background-color: green;
  }
  </style>